<template>
  {{ mValue || cValue }}
  </template>
  <script setup lang="ts">
  import { PropType, computed, onMounted, watch } from 'vue';
  import { MTableColumnType } from '../../Table/types';
  import { requestData } from '../../Form';
  import { useSelectStore } from '/@/store/modules/select';
  const selectStore = useSelectStore();
  const props = defineProps({
    data: {
      // 当前行数据
      type: Object
    },
    column: {
      // 列定义数据
      type: Object as PropType<MTableColumnType>
    }
  })
  /**
   * 获取缓存key前辍
   */
  const getCacheKeyPrefix = () =>{
    let cacheKeyPrefix = props.column?.componentProps?.cacheKeyPrefix
    if(!cacheKeyPrefix) {
      // Select_columnName
      cacheKeyPrefix = props.column?.component + "_" + (props.column?.key || props.column?.dataIndex)
    }
    return cacheKeyPrefix;
  }
  const cValue = computed(()=>{
    let v = props.data?.text
    props.column?.componentProps?.options?.forEach((item: any)=>{
      if(item.value == v) {
        v = item.label
      }
    })
    return v
  })
  const mValue = computed(()=>{
    let v = props.data?.text
    if(!v) return v;
    const key = getCacheKeyPrefix() + "_" + v;
    const options = selectStore.getSelectData(key)
    return options?.filter((item: any)=> item.value == v).map((item: any)=>item.label).join(',')
  })
  // 设置值
  const setValue = () =>{
    const api = props.column?.componentProps?.api
    if(api) {
      const text = props.data?.text
      if(text){
        const key = getCacheKeyPrefix() + "_" + text
        selectStore.requestData(key,api,{
         ...props.column?.componentProps?.params
        },requestData)
      }
    }
  }
  watch(()=>props.data?.text,()=>{
    setValue()
  })
  onMounted(()=>{
    setValue()
  })
  </script>
  <style lang="less" scoped>
  
  </style>